<template>
  <div class="login-body">
    <div class="bg"></div>
    <div class="login-panel">
      <t-form
        class="login-form"
        ref="form"
        :data="loginForm"
        :rules="rules"
        label-width="0"
        @submit="onSubmit"
      >
        <div class="login-title">
          <img src="@/assets/image/logo.png" alt="" />社牛Desk后台管理系统
        </div>
        <t-form-item name="username">
          <t-input
            v-model="loginForm.username"
            size="large"
            clearable
            borderless
            placeholder="请输入用户名"
          >
            <template #prefix-icon>
              <DesktopIcon />
            </template>
          </t-input>
        </t-form-item>
        <t-form-item name="password">
          <t-input
            v-model="loginForm.password"
            type="password"
            clearable
            borderless
            size="large"
            placeholder="请输入密码"
          >
            <template #prefix-icon>
              <LockOnIcon />
            </template>
          </t-input>
        </t-form-item>
        <t-form-item>
          <t-checkbox v-model="rememberme">记住我</t-checkbox>
        </t-form-item>
        <t-form-item>
          <t-button
            theme="primary"
            size="large"
            type="submit"
            :loading="loginStore.loading"
            style="width: 100%"
          >
            登 录
          </t-button>
        </t-form-item>
      </t-form>
      <div class="login-footer">
        Copyright © 2022-{{ new Date().getFullYear() }} SheniuDesk 1.0.0 All Rights Reserved.
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormProps } from 'tdesign-vue-next'
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next'
import type { IAccount } from './types'
import { myLocalStorage } from '@/utils/storage'
import useLoginStore from '@/stores/login/login'

const loginForm = ref<IAccount>({
  username: myLocalStorage.getStorage('username') || '',
  password: myLocalStorage.getStorage('password') || ''
})
const rememberme = ref(
  myLocalStorage.getStorage('username') && myLocalStorage.getStorage('password') ? true : false
)

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const loginStore = useLoginStore()
const onSubmit: FormProps['onSubmit'] = ({ validateResult }) => {
  if (validateResult !== true) return
  if (rememberme.value) {
    myLocalStorage.setStorage('username', loginForm.value.username)
    myLocalStorage.setStorage('password', loginForm.value.password)
  } else {
    myLocalStorage.deleteStorage('username')
    myLocalStorage.deleteStorage('password')
  }
  loginStore.loginAction(loginForm.value)
}
</script>

<style scoped lang="less">
.login-body {
  height: calc(100vh);
  background-size: cover;
  background: url('@/assets/image/login_bg.jpg');
  display: flex;
  .bg {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-size: 800px;
    background-repeat: no-repeat;
    background-image: url('@/assets/image/login_img.png');
  }
  .login-panel {
    width: 430px;
    margin-right: 15%;
    margin-top: calc((100vh - 500px) / 2);
    .login-form {
      padding: 25px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      .login-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 25px 0;
        font-size: 24px;
        font-weight: bold;
        color: rgba(1, 1, 1, 0.6);
        img {
          margin-right: 10px;
        }
      }
    }
  }
  .login-footer {
    font-size: 12px;
    color: #eee;
    opacity: 0.5;
    text-align: center;
    margin-top: 20px;
  }
}
</style>
